<template>
  <div class="login-container">
    <el-container>
      <el-header height="200px"
        ><div class="top_text">
          <h1 style="text-align: center;">图书馆后台管理系统</h1>
        </div></el-header
      >
      <el-main>
        <el-row>
          <el-col :span="8" :offset="8"
            ><div class="grid-content bg-purple">
             <div class="text"><h1 style="text-align: center;">欢迎登录</h1></div>
              <div class="main_text">
                <el-form ref="LoginFormRef" :model="LoginForm" :rules="LoginFormRules" label-width="80px" class="form">
                  <!--用户名-->
                  <el-form-item label="账号:" prop="username">
                    <el-input placeholder="Username" v-model="LoginForm.username"></el-input>
                  </el-form-item>
                  <!--密码-->
                  <el-form-item label="密码:" prop="password">
                    <el-input type="password" placeholder="Password" v-model="LoginForm.password"></el-input>
                  </el-form-item>
                  <!--按钮-->
                  <el-form-item class="box_but">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                  </el-form-item>
                </el-form>
              </div></div
          ></el-col>
        </el-row>
      </el-main>
      <el-footer height="300px">
        <div>
          <div class="footer_text"><i>创建时间：2021-2-3@李子彬</i></div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue';
    export default {
        data() 
        {
            return {
                LoginForm: {
                  password: '',
                  username: ''
                },
                LoginFormRules: {
                  snumber: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户名长度在3-10个字符', trigger: 'blur' }
                  ],
                  password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '密码长度为6-15个字符', trigger: 'blur' }
                  ]
                }
            };
        },
       methods: {
          reset() {
            this.$refs.LoginFormRef.resetFields()
          },
          login() {
            this.$refs.LoginFormRef.validate(async valid => {
              if (!valid) return
              const {data} = await this.$http.post('admin/user', this.LoginForm)
              if (data.stats !== 200) return this.$message.error('用户名或密码错误！')
              window.sessionStorage.setItem("token",data.token)
              this.$message.success('登录成功,欢迎！')
              this.$router.push('/Home')
              
            })
          }
        }
      }
</script>

<style lang="less" scoped>
.login-container {
  background: url(../assets/img/book.jpg);
  background-size: 100% 100%;
  height: 100%;
}
.text {
 padding-top: 40px;
}
.main_text {
  width: 400px;
  margin: 0 auto;
  padding-top: 40px;
}
.footer_text {
  color: aqua;
  width: 300px;
  height: 350;
  margin: 0 auto;
  margin-top: 200px;
  font-size: 22px;
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 350px;
}
.bg-purple {
  background: #DCDFE6;
}
</style>
